<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.11.0/dist/css/layui.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        /* 添加整体容器样式 */
        .form-container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin: 20px auto;
            max-width: 600px;
        }
        .navbar {
            display: none;
        }

        /* 优化表单元素间距 */
        .layui-form-item {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .layui-form-label {
            width: 120px;
            text-align: right;
            margin-right: 10px;
        }

        .layui-input-block {
            flex: 1;
        }

        /* 输入框样式优化 */
        .layui-input,
        .layui-textarea {
            border-radius: 4px;
            transition: border-color 0.3s ease;
        }

            .layui-input:focus,
            .layui-textarea:focus {
                border-color: #1E9FFF;
            }

        /* 按钮样式优化 */
        .layui-btn {
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }

            .layui-btn:hover {
                opacity: 0.9;
            }
    </style>
</head>

<body>
    <div class="form-container">
        <!-- 给容器追加 class="layui-form-pane"，即可显示为方框风格 -->
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">类型名称:*</label>
                <div class="layui-input-block">
                    <input type="text" style="width:300px" id="ProjectName" name="ProjectName" autocomplete="off"
                           placeholder="请输入" lay-verify="required" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">所含套餐数量:</label>
                <div class="layui-input-block">
                    <input type="text" style="width:300px" id="PackageNum" name="PackageNum" autocomplete="off"
                           placeholder="请输入" lay-verify="required" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">包含套餐:</label>
                <div class="layui-input-block">
                    <input type="text" id="PackagesAreIncluded" name="PackagesAreIncluded" autocomplete="off"
                           placeholder="请输入" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">描述:</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" id="Description" name="Description"
                              class="layui-textarea"></textarea>
                </div>
            </div>

            <div class="layui-form-item" pane>
                <label class="layui-form-label">状态:</label>
                <div class="layui-input-block">
                    <input type="checkbox" id="Status" checked name="Status" lay-skin="switch" lay-filter="switchTest"
                           title="开关">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 130px;">
                    <button class="layui-btn" lay-submit lay-filter="demo2">确认</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.11.0/dist/layui.js"></script>
    <script>
        layui.use(['form'], function () {
            var form = layui.form;
            var layer = layui.layer;

            form.on('submit(demo2)', function (data) {
                var pdata = {
                    ProjectName: $("#ProjectName").val(),
                    PackageNum: $("#PackageNum").val(),
                    PackagesAreIncluded: $("#PackagesAreIncluded").val(),
                    Description: $("#Description").val(),
                    Status: $("#Status").prop('checked')
                };

                // 客户端验证
                if (!pdata.ProjectName.trim()) {
                    layer.msg('类型名称不能为空');
                    return false;
                }

                $.ajax({
                    url: 'https://localhost:7027/api/PackageTypes/AddPackageType',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(pdata),
                    success: function (res) {
                        // 假设后端返回格式为 { code: 100, message: "成功" }
                        console.log(res);
                        if (res.code === 100) {
                            layer.msg('新增成功', { icon: 1 });
                            setTimeout(() => {
                                location.reload();
                            }, 1500);
                        } else {
                            layer.msg('新增失败: ' + (res.message || '未知错误'));
                        }
                    },
                    error: function (xhr) {
                        // 更健壮的错误处理
                        let errorMsg = '请求失败: ';
                        try {
                            const res = JSON.parse(xhr.responseText);
                            errorMsg += res.message || xhr.statusText;
                        } catch {
                            errorMsg += xhr.statusText || '网络错误';
                        }
                        layer.msg(errorMsg);
                    }
                });
                return false;
            });
        });
    </script>

</body>

</html>
